<template>
	<view class="content">
		<view class="list bg-img bg-mask padding-bottom-xl" v-for="(item,index) in articleList" @click="jumpDetail"
		 :data-i='index' :data-id='item.id' :key='index' :style="{background:'url(https://ms.hdyhlz.com/'+item.l_thumb_picture+')no-repeat',backgroundSize:'cover'}">
			<!-- <image :src="item.imgUrl" mode="widthFix"></image> -->
			<!-- <navigator style="width: 100%;height: 100%;" url="/pages/detail/detail" hover-class="none"> -->
			<view class="">
				<view class="title">
					{{item.l_title}}
				</view>
				<view class="article-info">
					<view class="article-info-top">
						<view class="time">
							{{item.l_created_at}}
						</view>
						<!-- <view class="day">
							{{item.day}}天 
						</view> -->
						<!-- <view class="seeNumber">
							{{item.seeNumber}}次浏览
						</view> -->
					</view>
					<!-- <view class="address">
						{{item.address}}
					</view> -->
				</view>
			</view>
			<view class="user-info">
				<!-- <image :src="item.userIcon" mode="widthFix"></image> -->
				<text>{{item.l_author}}</text>
			</view>
			<!-- </navigator> -->
		</view>
		<view :class="isLoad?'loading cu-load bg-grey':'over'" style="width: 100%;"></view>
		<view class="cu-bar bg-white margin-top" style="width: 100%;" v-if="isNotMore">
			<view class='action' style="width: 100%;">
				<text class='cuIcon-title text-blue'></text>
				沒有更多了...
			</view>
		</view>
	</view>
</template>

<script>
	const globalData = getApp().globalData;
	const url = '/pages/detail/detail';
	const httpurl = globalData.global_url + "/link/display";
	export default {
		data() {
			return {
				isLoad: false,
				articleList: [],
				meta: {
					count: 0,
					current_page: 0,
					links: [],
					per_page:20,
					total: 0,
					total_pages: 0
				},
				isNotMore: false
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getLinkeDisplay()
		},
		onReachBottom() {
			this.isLoad = true
			let page = this.meta.current_page
			if (++page > this.meta.total_pages) {
				this.isLoad = false 
				this.isNotMore = true 
				return false
			}
			this.getLinkeDisplay()
		},
		methods: {
			jumpDetail(e) {
				// console.log(e)
				uni.navigateTo({
					url: url + `?linkid=${e.currentTarget.dataset.id}`,
				})
			},
			getLinkeDisplay() {
				let params = {
					page: ++this.meta.current_page,
					page_size: this.meta.per_page
				}
				uni.request({
					url: httpurl,
					data: params
				}).then(data => {
					var [error, res] = data; 
					console.log(res.data);
					if (res.data.errno === '000') {
						this.articleList = [...this.articleList,...res.data.result.data]
						this.meta = res.data.result.meta
						this.isNotMore = res.data.result.meta.current_page > res.data.result.meta.total_pages || res.data.result.meta.current_page ===
							res.data.result.meta.total_pages ? true : false
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.list {
		width: 95%;
		height: 280upx;
		margin: 10upx 0;
		border-radius: 8upx;
		padding: 30upx;
		box-sizing: border-box;
		color: #fff;
	}

	.list {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title {
		font-size: 28upx;
		font-weight: bold;
	}

	.article-info {
		font-size: 18upx;
		border-left: 4upx solid #2C405A;
		margin-top: 10upx;
		padding-left: 8upx;
	}

	.article-info-top {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.day {
		margin: 0 20upx;
	}

	.user-info {
		font-size: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.user-info image {
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		margin-right: 10upx;
	}
</style>
